<template>
	<view >
		<u-image mode="widthFix" src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/assets-kuang.png"></u-image>
		<view class="padding32">
			<view class="" @click="scanCode" style="position: relative;">
				<image src="../../static/upload.png" style="width: 100%;height: 200rpx;" mode="widthFix"></image>
				<view class="uploadTxt">
					请上传完整的行驶证/登记证（含VIN部分）进行授权查询
				</view>
			</view>
			<!-- 	</u-cell-item>
			</u-cell-group> -->
		</view>
		<view class="padding32" style="border-radius:20rpx ;overflow: hidden;">
			<u-cell-group>
				<u-cell-item center :value="carName" :value-style="{'color':'#666'}" @click="clickCar"
					:arrow="true" title="品牌车系">
				</u-cell-item>
				<u-cell-item center @click="clickCarColor('车身颜色')" :value="assessInfo3.carColor" :arrow="true"
					title="车身颜色">
				</u-cell-item>
				<u-cell-item center :value="assessInfo3.date" :value-style="{'color':'#666'}" @click="clickDate"
					:arrow="true" title="首次上牌"></u-cell-item>
				<u-cell-item center value="" :arrow="false" title="行驶里程">
					<u-input slot="right-icon" v-model="assessInfo3.mileage" input-align="right" type="number"
						placeholder="请输入" />
					<text style="margin-left: 8px;" slot="right-icon">万公里</text>
				</u-cell-item>
			</u-cell-group>
		</view>
		<u-picker mode="time" :defaultTime="defaultTime" v-model="showDate" :params="params" @confirm="confirmDate">
		</u-picker>
		<u-popup v-model="showCarColor" mode="bottom" :mask-close-able="false">
			<view class="poppupBox">
				<view class="popupTitleStyle">
					<view style="float:left" @click="showCarColor=false">
						取消
					</view>
					<text>{{carTitle}}</text>
				</view>
				<view class="carBox">
					<view class="carBoxlist" :style="{'background-color': item.color}" v-for="item in carColorList" @click="getCarColor(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
		
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {URL,BASEURL} from "../../config.js"
	import app from "../../App.vue"
	export default {
		props:['carName'],
		data() {
			return {
				form: {},
				showDate: false,
				defaultTime: '',
				params: {
					year: true,
					month: true,
				},
				showCarColor:false,
				carTitle: '车身颜色',
				carColorList: [
					{
						name:'白色',
						color:'#FFFAFA'
					},
					{
						name:'黑色',
						color:'#000'
					},
					{
						name:'银色',
						color:'#778899'
					},
					{
						name:'灰色',
						color:'#808080'
					},
					// {
					// 	name:'米色',
					// 	color:'#FFF5EE'
					// },
					{
						name:'红色',
						color:'#FF0000'
					},
					
					{
						name:'黄色',
						color:'#FFD700'
					},
					{
						name:'其他',
						color:'#FFFAFA'
					},
				],
				assessInfo3: {
					vinCode: '',
					carModel: '请选择车型',
					addresss: '请选择地区',
					date: '请选择首次上牌',
					mileage: '', //行驶里程
					useNature: '未选择', //使用性质
					carColor: '未选择',
					transferTimes: '', //过户次数
					fullBatteryLife: '', //过户次数
				},
			}
		},
		created(){
		},
		methods:{
			scanCode() {
				console.log(this.carName)
				var that=this;
				uni.scanCode({
					success: function(res) {
						that.form = res.result.split(',');
						console.log(res)
					}
				});
			},
			// 选择日期
			clickDate() {
				let date = new Date();
				this.defaultTime = date.getFullYear() + '-' + (date.getMonth() + 1);
				this.showDate = true;
			},
			// 车身颜色
			clickCarColor(title) {
				this.showCarColor = true
			},
			// 选择车型
			clickCar() {
				uni.navigateTo({
					url: "../selectCar/selectCar"
				})
			},
			// 日期确定
			confirmDate(date) {
					this.assessInfo3.date = date.year + '-' + date.month
			},
			getCarColor(data){
				this.showCarColor = false,
				this.assessInfo3.carColor = data.name
			},
			getNum(){
				console.log("登录")
				 let token = uni.getStorageSync('token');
				 var that =this
				uni.request({
					url: URL.GETMAXNUM,
					method: 'GET',
					header: {
					      "token": token
					    },
					success: ({data}) => {
						console.log(data)
						if(data.code=="0"){
							that.form.handfulNo =  data.handfulNo;
							that.$forceUpdate()
						}else{
							uni.showToast({
								title:data.msg,
								icon:"none"
							})
						}
					},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped>
	.uploadTxt {
	    position: absolute;
	    bottom: 40rpx;
	    color: #fff;
	    font-size: 24rpx;
	    width: 100%;
	    text-align: center;
	}
	.padding32 {
	    margin: 30rpx;
	}
	.poppupBox {
		padding: 20rpx;
	}
	
	.poppupBoxlist {
		padding: 10rpx;
		border: 1px solid;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}
	
	.popupTitleStyle {
		border-bottom: 1px solid #ccc;
		text-align: center;
		margin-bottom: 30rpx;
		padding-bottom: 10rpx;
	}
	
	.carBox {
		display: flex;
		/* justify-content: center; */
		flex-wrap: wrap;
		justify-items: center;
		text-align: center;
	}
	
	.carBoxlist {
		padding: 14rpx 40rpx;
		margin: 18rpx;
		box-shadow: 1px 2px 4px 0 #0000006b;
		color: #fff;
		text-shadow: 2px 1px 11px #000;
		border-radius: 10rpx;
		/* border:2px solid; */
	}
</style>
